<template>
	<view>
		<view class="position-f btn-gol pt-20 pl-32 pr-32" style="" :style="'z-index: 10;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);background-color: '+ bgColor +';' +  (isIpX ? 'padding-bottom: 68rpx;' : 'padding-bottom: 12rpx;')">
			<slot></slot>
		</view>
		<view :class="(isIpX ? 'height-200' : 'height-140')"></view>
	</view>
</template>

<script>
	export default {
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			}
		},
		data() {
			return {
				isIpX: false
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '新的标题'
			});
		},
		onReady () {
			this.isIpX = this.securityZone();
		},
		methods: {
			securityZone() {
				let IPHONE_X = /iphone x/i
				let IPHONE_X_11 = /iphone 11/i
				let IPHONE_X_12 = /iphone 12/i
				let IPHONE_X_13 = /iphone 13/i
				let IPHONE_X_14 = /iPhone 14/i
				let IPHONE_X_15 = /iPhone 15/i
				let IPHONE_UNKNOWN = /unknown\(iphone\)/i
				//方法一：使用model判断是否是IPhoneX及其他包含安全区域的机型手机
				let model = uni.getSystemInfoSync().model;
				console.log(model);
				const isIPhoneX = () => {
					return (model.search(IPHONE_X) > -1 || model.search(IPHONE_X_11) > -1 || model.search(
						IPHONE_X_12) > -1 || model.search(IPHONE_X_13) > -1 || model.search(IPHONE_X_14) > -1 ||
						model.search(IPHONE_X_15) > -1 || model.search(IPHONE_UNKNOWN) > -1)
				}
				//也可以使用正则表达式判断
				const isIPhoneXRegex = () => {
					return (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model)) ||
						/iphone\s11/i.test(model))
				}
				let isIpX = isIPhoneX() || isIPhoneXRegex();
				return isIpX;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btn-gol {
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-sizing: border-box;
	}
</style>